<%@ page import="com.fantasy.utils.CookieUtils" %>
<%@ page import="com.fantasy.service.UserService" %>
<%@ page import="com.fantasy.service.impl.UserServiceImpl" %>
<%@ page import="com.fantasy.entity.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人中心</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="../bootstrap/css/style.css">
    <link rel="stylesheet" href="../bootstrap/css/font-awesome(1).css">
    <link rel="stylesheet" href="../bootstrap/css/nprogress.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/program.css">
    <%--  按钮样式   --%>
    <style>
        #draw-border {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            background: #eee;
        }

        #draw-border1 {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            background: #eee;
        }

        .four {
            border: 0;
            background: none;
            text-transform: uppercase;
            color: #4361ee;
            font-weight: bold;
            position: relative;
            outline: none;
            padding: 11px 45px;
            box-sizing: border-box;
        }

        .four::before, .four::after {
            box-sizing: inherit;
            position: absolute;
            content: '';
            border: 2px solid transparent;
            width: 0;
            height: 0;
        }

        .four::after {
            bottom: 0;
            right: 0;
        }

        .four::before {
            top: 0;
            left: 0;
        }

        .four:hover::before, .four:hover::after {
            width: 100%;
            height: 100%;
        }

        .four:hover::before {
            border-top-color: #4361ee;
            border-right-color: #4361ee;
            transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
        }

        .four:hover::after {
            border-bottom-color: #4361ee;
            border-left-color: #4361ee;
            transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
        }


        #loading-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 30px;
        }

        .eight {
            background: transparent;
            border: 0;
            border-radius: 0;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 20px;
            padding: 5px 16px;
            position: relative;
        }

        .eight:before {
            transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);
            content: '';
            width: 1%;
            height: 100%;
            background: #ff5964;
            position: absolute;
            top: 0;
            left: 0;
        }

        .eight span {
            mix-blend-mode: darken;
        }

        .eight:hover:before {
            background: #ff5964;
            width: 100%;
        }
    </style>

</head>

<body>
<div class="wrapper">
    <jsp:include page="./leftSidebar.jsp"></jsp:include>
    <div class="aside">
        <div class="widgets">
            <h4>我的消息</h4>
            <ul class="body discuz">
                <li>
                    <a href="javascript:;">
                        <div class="avatar">
                            <img src="../uploads/avatar_1.jpg" alt="">
                        </div>
                        <div class="txt">
                            <p>
                                <span>鲜活</span>2020-02-01说:
                            </p>
                            <p>挺会玩的</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <div class="avatar">
                            <img src="../uploads/avatar_1.jpg" alt="">
                        </div>
                        <div class="txt">
                            <p>
                                <span>鲜活</span>2020-02-01说:
                            </p>
                            <p>挺会玩的</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <div class="avatar">
                            <img src="../uploads/avatar_2.jpg" alt="">
                        </div>
                        <div class="txt">
                            <p>
                                <span>鲜活</span>2020-02-01说:
                            </p>
                            <p>挺会玩的</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <div class="avatar">
                            <img src="../uploads/avatar_1.jpg" alt="">
                        </div>
                        <div class="txt">
                            <p>
                                <span>鲜活</span>2020-02-01说:
                            </p>
                            <p>挺会玩的</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <div class="avatar">
                            <img src="../uploads/avatar_2.jpg" alt="">
                        </div>
                        <div class="txt">
                            <p>
                                <span>鲜活</span>2020-02-01说:
                            </p>
                            <p>挺会玩的</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <div class="avatar">
                            <img src="../uploads/avatar_1.jpg" alt="">
                        </div>
                        <div class="txt">
                            <p>
                                <span>鲜活</span>2020-02-01说:
                            </p>
                            <p>挺会玩的</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="content">
        <%
            Cookie[] cookies = request.getCookies();
            String userId = CookieUtils.getCookie("userId", cookies);
            if (userId.equals("0")) {
        %>
        <jsp:include page="./LoginOrRegister.jsp"></jsp:include>
        <%
        } else {

        %>
        <!--  我的信息       -->
        <div class="panel new">
            <div class="row" style="height: 250px">
                <div class="col-sm-2" style="height: 250px">
                    <h3 style="margin-top: 0">我的信息</h3>
                    <%--  头像读取      --%>
                    <div style="height: 100px;margin-top: 50px">
                        <a data-toggle="modal" href="#reHeadImg">
                            <img src="<%
                            UserService userService = new UserServiceImpl();
                            User user = userService.queryById(Integer.parseInt(userId));
                            if (user.getHeadImg()==null){
                                out.print("/fantasy/img/null.jpg");
                            }else{
                                out.print("/fantasy/img/"+user.getHeadImg());
                            }
                            %>" alt="" class="img-circle">
                        </a>
                    </div>
                </div>
                <!--     个人信息表单        -->
                <div class="col-sm-10" style="height: 250px">
                    <form action="./user.do">
                        <input type="hidden" id="action" name="action" value="revise">
                        <div class="row" style="height: 75px;">
                            <div class="col-sm-4" style="height: 75px;padding: 15px">
                                <label for="username" class="control-label" style="margin-right: 2px">用户名 : </label>
                                <input type="text" name="username" id="username" style="width: 160px;height: 35px"
                                       value="<%= user.getName() %>">
                            </div>
                            <div class="col-sm-4" style="height: 75px;padding: 15px">
                                <label for="password" class="control-label">密码 :</label>
                                <input type="text" name="password" id="password" value="<%= user.getPassword()%>"
                                       style="width: 160px;height: 35px">
                            </div>
                            <div class="col-sm-4" style="height: 75px;padding: 15px">
                                <label for="email" class="control-label">email :</label>
                                <input type="email" name="email" id="email" value="<%= user.getEmail()%>"
                                       style="width: 160px;height: 35px">
                            </div>
                        </div>

                        <div class="row" style="height: 75px;">
                            <div class="col-sm-4" style="height: 75px;padding: 15px">
                                <label for="phone" class="control-label">phone : </label>
                                <input type="text" name="phone" id="phone" value="<%= user.getPhone()%>"
                                       style="width: 160px;height: 35px">
                            </div>
                            <div class="col-sm-4" style="height: 75px;padding: 15px">
                                <label class="control-label" style="margin-right: 30px;margin-top: 7px">生日 :</label>
                                <span><%
                                    String registerDate = user.getRegisterDate();
                                    String[] s = registerDate.split(" ");
                                    out.print(s[0]);
                                %></span>
                            </div>
                            <div class="col-sm-4" style="height: 75px;">
                                <div class="row" style="height: 75px">
                                    <div class="col-sm-7" style="height: 40px;margin-top: 15px;padding-right: 0">
                                        <label class="control-label" style="margin-right: 5px;margin-top: 7px">会员状态
                                            :</label>
                                        <span style="margin-right: 5px"><%
                                            if (user.getVip() == null || (!(user.getVip() == 1))) {
                                                out.print("未激活");
                                            } else {
                                                out.print("已激活");
                                            }
                                        %></span>
                                    </div>
                                    <div class="col-sm-5" style="height: 40px;margin-top: 10px;padding-left: 0">
                                        <div id="loading-btn">
                                            <%
                                                if (user.getVip() == null || (!(user.getVip() == 1))) {
                                            %>
                                            <button type="button" class="eight" id="vip"><span>激活</span></button>
                                            <%
                                                }
                                            %>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="height: 100px;">
                            <div class="col-sm-8" style="height: 100px;">
                                <label for="textarea" class="control-label"
                                       style="vertical-align:top;margin-right: 17px">简介 : </label>
                                <textarea style="width: 380px;height: 100px" id="textarea" name="introduction">
                                     <%= user.getIntroduce()%>
                                    </textarea>
                            </div>
                            <div class="col-sm-4" style="height: 100px;padding: 30px 20px 20px 20px">
                                <button type="submit" class="btn btn-lg btn-success" style="width: 100px"> 修改</button>
                                <button type="button" class="btn btn-lg btn-danger btn-logout" style="width: 100px">
                                    注销
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--      收藏夹      -->
        <div id="userId" style="display: none"><%=userId%>
        </div>
        <div class="panel hots">
            <div class="row" style="height: 50px">
                <div class="col-sm-4" style="height: 50px">
                    <h3 style="margin-top: 0">收藏夹</h3>
                </div>
                <div class="col-sm-6" style="height: 50px">
                </div>
                <div class="col-sm-2" style="height: 50px">
                    <div id="draw-border">
                        <button class="four" id="favorite">更多</button>
                    </div>
                </div>
            </div>
            <ul id="favoriteArea">

            </ul>
        </div>
        <!--    历史记录        -->
        <div class="panel hots">
            <div class="row" style="height: 50px">
                <div class="col-sm-4" style="height: 50px">
                    <h3 style="margin-top: 0">历史记录</h3>
                </div>
                <div class="col-sm-6" style="height: 50px">
                </div>
                <div class="col-sm-2" style="height: 50px">
                    <div id="draw-border1">
                        <button class="four " id="history">更多</button>
                    </div>
                </div>
            </div>
            <ul id="historyArea">

            </ul>
        </div>
        <%
            }
        %>
    </div>
</div>
<div class="modal fade" id="reHeadImg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">

        <div class="modal-content">
            <form class="form-horizontal" action="./user.do">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">更换头像</h4>
                </div>
                <input type="hidden" name="action" value="reHeadImg">
                <div class="modal-body" style="height: 250px">
                    <div class="row" style="height: 250px">
                        <div class="col-md-1" style="height: 50px"></div>
                        <div class="col-md-10" style="height: 50px">
                            <div class="form-group" style="height: 50px;margin-top: 10px">
                                <label for="imgUrl" class="col-sm-3 control-label" style="height: 50px">头像</label>
                                <div class="col-sm-9" style="height: 50px">
                                    <input type="file" class="form-control" id="imgUrl" placeholder="请上传商品图片">
                                    <input type="hidden" id="realname" name="realname" value="">
                                </div>
                            </div>
                            <div class="form-group" style="height: 50px;margin-top: 20px">
                                <label class="col-sm-3 control-label " style="height: 50px">头像预览</label>
                                <div class="col-sm-9" id="avatar"
                                     style="height: 110px;width: 110px;border: 1px solid black;padding: 0;margin-left: 90px">
                                    <img src="<%
                                        UserService userService = new UserServiceImpl();
                                        User user = userService.queryById(Integer.parseInt(userId));
                                        if (user!=null)
                                            if (user.getHeadImg()!=null){
                                                out.print("/fantasy/img/"+user.getHeadImg());
                                            }else{
                                                out.print("../images/noLogin.jpg");
                                            }
                                        %>" id="HeadImg">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-1" style="height: 250px"></div>
                    </div>
                </div>
                <div class="modal-footer" style="height: 70px;text-align: center">
                    <button type="submit" class="btn btn-primary btn-reHeadImg" style="margin-left: 50px">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" style="margin-left: 50px">关闭
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>


<script src="../bootstrap/js/jquery/jquery.js"></script>
<script src="../bootstrap/js/nprogress/nprogress.js"></script>
<script src="../bootstrap/js/cookie.min.js"></script>
<script type="text/javascript">
    $(function () {
        /**
         * 获取历史记录内容
         * @type {*|jQuery}
         */
        var userId = $.cookie("userId");
        $.get("history.do", {
            action: "pageAjax",
            userId: userId
        }, function (data) {
            //console.log(data)
            li = "";
            if (data == null) {

            } else {
                for (var i = 0; i < data.items.length; i++) {

                    li += '<li>' +
                        '<a href="video.jsp">' +
                        '<img src="/fantasy/videoUpload/' + data.items[i].videoImg + '" alt="">' +
                        '<span>' + data.items[i].name + '</span>' +
                        '</a>' +
                        '</li>'
                }
            }
            $("#historyArea").append(li);
        })

        /**
         * 获取收藏夹内容
         * @type {*|jQuery}
         */
        var userId = $.cookie("userId");
        $.get("favorite.do", {
            action: "pageAjax",
            userId: userId
        }, function (data) {
            console.log(data)
            var li = "";
            if (data == null) {

            } else {
                for (var i = 0; i < data.items.length; i++) {
                    li += '<li>' +
                        '<a href="video.jsp">' +
                        '<img src="/fantasy/videoUpload/' + data.items[i].videoImg + '" alt="">' +
                        '<span>' + data.items[i].name + '</span>' +
                        '</a>' +
                        '</li>'
                }
            }


            $("#favoriteArea").append(li);
        })


        var userId = $('#userId').text().trim();
        //收藏夹跳转
        $("#favorite").click(function () {
            location.href = "./favorite.do?action=page&userId=" + userId;
        })
        //历史记录跳转
        $("#history").click(function () {
            location.href = "./history.do?action=page&userId=" + userId;
        })
        //注销当前账号登录状态
        $(".btn-logout").click(function () {
            $.ajax({
                url: "./user.do",
                data: {action: "logout"},
                type: "GET",
                success: function (data) {
                    location.href = "./index.jsp";
                }
            })
        })

        $("#imgUrl").change(function () {
            var file = $("#imgUrl")[0].files[0];
            var myForm = new FormData();
            myForm.append("file", file);
            $.ajax({
                method: "post",
                data: myForm,
                url: "./reHeadImg.do",
                processData: false,//禁止类型转换//必须false才会避开jQuery对 formdata 的默认处理
                contentType: false,//必须false才会自动加上正确的Content-Type
                dataType: "text",
                success: function (data) {
                    $("#HeadImg").prop("src", "/fantasy/img/" + data);
                    $("#realname").prop("value", data)
                }
            })
        })
        $("#vip").click(function () {
            let userId = $.cookie("userId");
            $.ajax({
                url: './user.do',
                data: {action: "toVip", userId: userId},
                success: function () {
                    alert("激活成功!")
                    location.href = './myself.jsp';
                }
            })
        })
    })

</script>


</body>

</html>